@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
	background-color: #F2F5F6;
	width: 450px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	padding: 5px;
	margin-top: 0;
	margin-bottom: 15px;
}

.entry {
	display: block;
	margin: 0;
	padding: 4px;
	border-style: solid;
	border-width: 0 1px 1px 1px;
	border-color: #D9D9D9;
	background-color: #FFF;
	position: relative;
	
	&.first-row {
		border-top-width: 1px;
		-webkit-border-top-left-radius: 4px;
		-webkit-border-top-right-radius: 4px;
	}
	
	&.last-row {
		-webkit-border-bottom-left-radius: 4px;
		-webkit-border-bottom-right-radius: 4px;
	}
	
	&.top-first-tab {
		border-left-width: 1px !important;
		-webkit-border-top-left-radius: 4px !important;
	}
	
	&.top-last-tab {
		border-right-width: 1px !important;
		-webkit-border-top-right-radius: 4px !important;
	}
	
	&.bottom-first-tab {
		border-left-width: 1px !important;
		-webkit-border-bottom-left-radius: 4px !important;
	}
	
	&.bottom-last-tab {
		border-right-width: 1px !important;
		-webkit-border-bottom-right-radius: 4px !important;
	}
	
	&.solo {
		border-top-width: 1px;
		-webkit-border-radius: 4px;
	}
}

input[type="text"] {
	border: 0;
	font-family: 'Open Sans', sans-serif;
	font-size: 12pt;
	width: 100%;
}

label {
	font-size: 12pt;
}

textarea {
	border: 0;
	font-family: 'Ubuntu Mono', monospace;
	font-size: 12pt;
	width: 100%;
	height: 35%;
}

#header {
	padding-bottom: 10px;
	padding-left: 5px;
	
	.title {
		font-size: 14px;
		font-weight: 600;
	}
}

#information {
	margin-bottom: 5px;
	display: block;
	width: 100%;
	
	div {
		.entry;
		width: 440px;
		
		&:first-child {
			.entry.first-row;
		}
		
		&:last-child {
			.entry.last-row;
		}
		
		label:not(.txtarea){
			top: 8px;
			color: #777;
			position: absolute;
			white-space: nowrap;
			cursor: text;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
			-webkit-transition: opacity .4s, font-size .5s;
			
			&.hasome {
				opacity: 0;
				font-size: 0 !important;
			}
		}
		
		label.txtarea{
			left: 7px;
			top: 3px;
			color: #777;
			position: absolute;
			white-space: nowrap;
			cursor: text;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
			-webkit-transition: opacity .4s, font-size .5s;
			
			&.hasome {
				opacity: 0;
				font-size: 0 !important;
			}
		}
	}
}

#control {
	display: block;
	
	div {
		.entry;
		
		&.autorun, &.jquery, &.regex {
			width: 105px;
			float: left;
			text-align: center;
			border-width: 1px 1px 1px 0;
			
			&.autorun {
				.entry.top-first-tab;
			}
			
			&.regex {
				.entry.top-last-tab;
			}
		}
		
		&.autostyle {
			width: 105px;
			float: left;
			text-align: center;
			border-width: 0 1px 1px 0;
			
			&.autostyle {
				.entry.bottom-first-tab;
			}
			
			&.regex {
				.entry.bottom-last-tab;
			}
		}
		
		&.inject {
			.entry.solo;
			width: 90px;
			float: right;
			text-align: center;
			color: #59595B;
			font-weight: bold;
			text-shadow: #EDF6E5 1px 1px 0;
			-webkit-border-radius: 4px;
			border: 1px solid #B2C0A6;
			background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#E0EFD3),color-stop(1,#EFF8E6));
			
			&:hover {
				background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1,#E0EFD3),color-stop(0,#EFF8E6));
			}
		}
	}
}

div.clear {
	clear: left;
	border-style: none !important;
	border-width: 0 !important;
	padding: 0 !important;
}